import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { BlurView } from 'expo-blur';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '../contexts/AuthContext';
import { theme } from '../styles/theme';

const ProfileScreen = ({ navigation }) => {
  const { user, logout } = useAuth();

  const handleLogout = () => {
    Alert.alert(
      '退出登录',
      '确定要退出当前账号吗？',
      [
        { text: '取消', style: 'cancel' },
        {
          text: '确定',
          style: 'destructive',
          onPress: logout
        }
      ]
    );
  };

  const menuItems = [
    {
      section: '账户信息',
      items: [
        { icon: 'person-outline', label: '个人资料', value: user?.name },
        { icon: 'call-outline', label: '手机号', value: user?.phone }
      ]
    },
    {
      section: '设置',
      items: [
        { icon: 'notifications-outline', label: '消息通知', onPress: () => {} },
        { icon: 'shield-checkmark-outline', label: '账户安全', onPress: () => {} },
        { icon: 'help-circle-outline', label: '帮助与反馈', onPress: () => {} },
        { icon: 'information-circle-outline', label: '关于我们', onPress: () => {} }
      ]
    }
  ];

  return (
    <LinearGradient colors={['#000000', '#1a1a1a']} style={styles.container}>
      {/* 头部 */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Ionicons name="arrow-back" size={24} color={theme.colors.text} />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>个人中心</Text>
        <View style={{ width: 24 }} />
      </View>

      <ScrollView contentContainerStyle={styles.scrollContent}>
        {/* 用户卡片 */}
        <BlurView intensity={30} tint="dark" style={styles.userCard}>
          <LinearGradient
            colors={theme.gradients.gold}
            style={styles.avatarGradient}
          >
            <Text style={styles.avatarText}>{user?.name?.charAt(0)}</Text>
          </LinearGradient>
          <View style={styles.userInfo}>
            <Text style={styles.userName}>{user?.name}</Text>
            <View style={styles.userBadge}>
              <Ionicons name="shield-checkmark" size={14} color={theme.colors.primary} />
              <Text style={styles.badgeText}>已认证用户</Text>
            </View>
          </View>
          <View style={styles.userDecor} />
        </BlurView>

        {/* 菜单列表 */}
        {menuItems.map((section, index) => (
          <View key={index} style={styles.section}>
            <Text style={styles.sectionTitle}>{section.section}</Text>
            <BlurView intensity={15} tint="dark" style={styles.menuGroup}>
              {section.items.map((item, itemIndex) => (
                <View key={itemIndex}>
                  <TouchableOpacity
                    style={styles.menuItem}
                    onPress={item.onPress}
                    activeOpacity={0.7}
                  >
                    <View style={styles.menuLeft}>
                      <View style={styles.iconContainer}>
                        <Ionicons name={item.icon} size={20} color={theme.colors.primary} />
                      </View>
                      <Text style={styles.menuLabel}>{item.label}</Text>
                    </View>
                    {item.value ? (
                      <Text style={styles.menuValue}>{item.value}</Text>
                    ) : (
                      <Ionicons name="chevron-forward" size={20} color={theme.colors.textDim} />
                    )}
                  </TouchableOpacity>
                  {itemIndex < section.items.length - 1 && <View style={styles.divider} />}
                </View>
              ))}
            </BlurView>
          </View>
        ))}

        {/* 退出登录按钮 */}
        <TouchableOpacity
          style={styles.logoutButton}
          onPress={handleLogout}
          activeOpacity={0.8}
        >
          <BlurView intensity={20} tint="dark" style={styles.logoutBlur}>
            <Ionicons name="log-out-outline" size={24} color={theme.colors.error} />
            <Text style={styles.logoutText}>退出登录</Text>
          </BlurView>
        </TouchableOpacity>

        {/* 版本信息 */}
        <Text style={styles.version}>版本 1.0.0</Text>
      </ScrollView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.lg,
    paddingTop: theme.spacing.xxl,
    paddingBottom: theme.spacing.md
  },
  headerTitle: {
    fontSize: theme.fontSizes.xlarge,
    fontWeight: 'bold',
    color: theme.colors.text
  },
  scrollContent: {
    padding: theme.spacing.lg,
    paddingTop: 0
  },
  userCard: {
    borderRadius: theme.borderRadius.large,
    padding: theme.spacing.xl,
    marginBottom: theme.spacing.xl,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: theme.colors.border,
    overflow: 'hidden'
  },
  avatarGradient: {
    width: 70,
    height: 70,
    borderRadius: theme.borderRadius.xlarge,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: theme.spacing.md,
    ...theme.shadows.medium
  },
  avatarText: {
    fontSize: theme.fontSizes.huge,
    fontWeight: 'bold',
    color: '#000'
  },
  userInfo: {
    flex: 1
  },
  userName: {
    fontSize: theme.fontSizes.xxlarge,
    fontWeight: 'bold',
    color: theme.colors.text,
    marginBottom: theme.spacing.sm
  },
  userBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: theme.spacing.xs,
    backgroundColor: theme.colors.glass,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.xs,
    borderRadius: theme.borderRadius.round,
    alignSelf: 'flex-start'
  },
  badgeText: {
    fontSize: theme.fontSizes.small,
    color: theme.colors.primary
  },
  userDecor: {
    position: 'absolute',
    right: -30,
    top: -30,
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: theme.colors.primary,
    opacity: 0.05
  },
  section: {
    marginBottom: theme.spacing.lg
  },
  sectionTitle: {
    fontSize: theme.fontSizes.small,
    color: theme.colors.textDim,
    marginBottom: theme.spacing.sm,
    marginLeft: theme.spacing.xs,
    letterSpacing: 1,
    textTransform: 'uppercase'
  },
  menuGroup: {
    borderRadius: theme.borderRadius.medium,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: theme.colors.border
  },
  menuItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: theme.spacing.md
  },
  menuLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  iconContainer: {
    width: 36,
    height: 36,
    borderRadius: theme.borderRadius.small,
    backgroundColor: theme.colors.glass,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: theme.spacing.md
  },
  menuLabel: {
    fontSize: theme.fontSizes.medium,
    color: theme.colors.text
  },
  menuValue: {
    fontSize: theme.fontSizes.medium,
    color: theme.colors.textSecondary,
    marginRight: theme.spacing.sm
  },
  divider: {
    height: 1,
    backgroundColor: theme.colors.divider,
    marginLeft: theme.spacing.md + 36 + theme.spacing.md
  },
  logoutButton: {
    marginTop: theme.spacing.lg,
    marginBottom: theme.spacing.xl
  },
  logoutBlur: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: theme.spacing.md,
    borderRadius: theme.borderRadius.medium,
    borderWidth: 1,
    borderColor: theme.colors.error + '30',
    gap: theme.spacing.sm
  },
  logoutText: {
    fontSize: theme.fontSizes.large,
    color: theme.colors.error,
    fontWeight: '600'
  },
  version: {
    textAlign: 'center',
    fontSize: theme.fontSizes.small,
    color: theme.colors.textDim,
    marginBottom: theme.spacing.lg
  }
});

export default ProfileScreen;
